<template>
    <div>
        <a-modal v-model:visible="modalVisible" title="机主须知" @ok="handleOk" width="1000px">
            <div class="theme-doc-markdown markdown wordView">
                <h1 class="mb-16">机主须知</h1>
                <h3 id="一出租说明">一、出租说明<a href="#一出租说明" class="hash-link" aria-label="一、出租说明的直接链接" title="一、出租说明的直接链接">​</a>
                </h3>
                <p>用户租用的机器列表中最长可租用时间=机主设置的机器结束时间 - 10 天。
                    这十天平台会自动将机器下架，用户在机器市场看到机器，只允许用户从停止中的容器启动，同时平台会提醒用户迁移数据。</p>
                <h3 id="二收入说明">二、收入说明<a href="#二收入说明" class="hash-link" aria-label="二、收入说明的直接链接" title="二、收入说明的直接链接">​</a>
                </h3>
                <ol>
                    <li>添加机器，并将机器上架，用户租用机器，可以有现金收入。 每台机器上架后，平台为保证机器的稳定性，会收取 100 元押金。 收入先支付押金，超过押金总额部分，可进行提现。</li>
                </ol>
                <p>可提现金额 = 截止上月的现金收入总金额 - 押金总额 - 已提现金额 ，每月可提现一次，平台会在5个工作日内转到机主的现金账户。</p>
                <p>机主把所有的机器都下架删除后，平台会在10天内退还全部押金。</p>
                <ol start="2">
                    <li>关于定价
                        机主拥有自主定价权，可以设置每台机器的单张GPU的价格。 每笔订单在扣除用户折扣和代金券后，平台将收取固定比例的金额作为平台服务费，剩余部分均为机主收入。</li>
                </ol>
                <p>机主收入=订单实际支付金额✖（1-平台服务费比例），其中订单实际支付金额=单价✖GPU数✖订单时长（小时）✖用户折扣-代金券支付金额。</p>
                <p>注意：<strong>代金券支付部分不作为机主收入，代金券机主可以在【我的机器】页面中对机器是否可以使用代金券支付做设置。</strong></p>
                <h3 class="anchor anchorWithStickyNavbar_LWe7" id="三评分说明">三、评分说明<a href="#三评分说明" class="hash-link"
                        aria-label="三、评分说明的直接链接" title="三、评分说明的直接链接">​</a></h3>
                <p>机主评分为0-5分制，满分5分。</p>
                <p>机主的初始评分为3.5。当分数降为0分时，机主身份自动终止，所有机器自动下线。</p>
                <p><strong>计分规则</strong></p>
                <p>
                    <a-table :dataSource="tableList1" :columns="columns1" :pagination="false" bordered>
                        <template #bodyCell="{ column, record }">
                            <template v-if="column.key === 'remark'">
                                <div>{{ record.remark }}</div>
                                <div>{{ record.remark1 }}</div>
                            </template>
                        </template>
                    </a-table>
                </p>
                <p>每日加分上限500分，每日扣分上限3000分。</p>
                <p><strong>等级规则</strong></p>
                <p>
                    <a-table :dataSource="tableList2" :columns="columns2" :pagination="false" bordered></a-table>
                </p>
                <h3 class="" id="四平台赔付机制">四、平台赔付机制</h3>
                <ol>
                    <li>如果用户在使用过程中机器出现断网或者断电的情况，平台会对用户进行补偿，该补偿金会从机主的提现金额里面直接扣除，如果有不可避免的维护操作，请提前和客服人员进行联系。</li>
                    <li>如果一个月多有三次不通知平台，单方面进行的断网/断电，会取消机主资质。</li>
                </ol>
                <h3>五、下线机器流程</h3>
                <ol>
                    <li>如果当前机器有用户正在使用，则不能立即下线机器，否则用户无法使用，将会扣除提现金额。</li>
                    <li>为了防止新用户使用，可以将机器下架，这样新用户就无法租用机器。等到老用户使用完成，就可以进行维护。</li>
                    <li>如果机主把当前的机器全部下线删除，一个月后会自动取消机主身份。</li>
                </ol>
            </div>
        </a-modal>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, computed, ref } from 'vue';

const props = defineProps({
    modelValue: {
        type: Boolean,
    },
});

const emit = defineEmits(['update:modelValue']);
const modalVisible = computed({
    get: () => props.modelValue,
    set: v => emit('update:modelValue', v),
});
// 确定按钮的回调
const handleOk = () => {
    emit('update:modelValue', false)
};

const tableList1 = ref([
    { subject: '机器出租', score: '每张卡+1分/小时', remark: '不足30分钟，不计分', remark1: '30-60分钟之间，+1分' },
    { subject: '中断', score: '500分/次', remark: '指超过1分钟的断网', remark1: '网络抖动造成的超短时间断线不扣分' }
])

const columns1 = [
    {
        title: '事项',
        dataIndex: 'subject',
        key: 'subject',
    },
    {
        title: '分数变动',
        dataIndex: 'score',
        key: 'score',
    },
    {
        title: '说明',
        dataIndex: 'remark',
        key: 'remark',
    }
]

const tableList2 = ref([
    { grade: '0', score: '0' },
    { grade: '1', score: '5000' },
    { grade: '2', score: '10000' },
    { grade: '3', score: '15000' },
    { grade: '4', score: '30000' },
    { grade: '5', score: '50000' },
])

const columns2 = [
    {
        title: '等级',
        dataIndex: 'grade',
        key: 'grade',
    },
    {
        title: '分数',
        dataIndex: 'score',
        key: 'score',
    },

]


</script>

<style scoped lang="less">
.wordView {
    height: 70vh;
    overflow-y: auto;
    padding: 24px;

    h3 {
        margin-bottom: 8px;
        font-size: 24px;
        font-weight: 700;
    }

    p {
        margin-bottom: 16px;
        font-size: 16px;
        color: #223354;
    }

    ol {
        padding-left: 24px;
        margin-bottom: 16px;
        list-style: decimal;
        li {
            font-size: 16px;
            color: #223354;
        }
    }
}
</style>

